<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="存储账户" name="storeAccount">
        <div class="mainDiv">
          <el-row>
            <el-col>
              <div class="storeAccountTotalTitle">存储账户总额</div>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <div id="total_t1" class="storeAccountTotal">{{storeTotalAccount.toFixed(2)}}（元）</div>
            </el-col>
          </el-row>
          <el-divider content-position="left" class="divider-font">个人资金流水</el-divider>
          <el-timeline :reverse="reverse">
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :timestamp="activity.timestamp">
              {{activity.content}}
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-tab-pane>
      <el-tab-pane label="预存账户" name="preStorageAccount">
        <div class="mainDiv">
          <el-row>
            <el-col>
              <div class="storeAccountTotalTitle">预存账户总额</div>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <div id="total_t1" class="storeAccountTotal">{{preTotalAccount.toFixed(2)}}（元）</div>
            </el-col>
          </el-row>
          <el-divider content-position="left" class="divider-font">个人资金流水</el-divider>
          <el-timeline :reverse="reverse">
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :timestamp="activity.timestamp">
              {{activity.content}}
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'storeAccount',
      storeTotalAccount: 0,
      preTotalAccount: 0,
      reverse: true,
      activities: [{
        content: '活动按期开始',
        timestamp: '2018-04-15'
      }, {
        content: '通过审核',
        timestamp: '2018-04-13'
      }, {
        content: '创建成功',
        timestamp: '2018-04-11'
      }]
    }
  }
}
</script>

<style scoped>
.mainDiv {
  padding: 20px 60px;
}

.storeAccountTotalTitle {
  font-weight: 700;
  font-size: 16px;
}

.storeAccountTotal {
  height: 69px;
  margin-top: 8px;
  color: #FFB800 !important;
  font-weight: 700;
  font-size: 46px;
}

.el-divider__text {
  font-size: 24px;
  font-weight: 300;
}

.el-timeline {
  margin-top: 30px;
  padding: 0;
}
</style>
